<!-- 直播 -->
<template>
	<view class="live-broadsast" v-if="liveList.length > 0">
		<scroll-view class="scroll-live" :scroll-x="true" :scroll-with-animation="true" v-if="liveList.length > 0">
			<view class="scroll-live-item" v-for="(item, inx) in liveList" :key="inx" @click="liveBtn(item)">
				<view class="live-left-top df-cen">
					<image :src="staticImgUrl + 'home/video_top.png'" style="width: 40rpx;height: 40rpx;margin-right: 10rpx;"></image>
					{{ item.views }}人气
				</view>
				<image :src="$Utils.img(item.showThumb)" mode="" class="image-radius"></image>
			</view>
		</scroll-view>
	</view>
</template>

<script>
export default {
	name: 'live-broadsast',
	data() {
		return {
			liveList: []
		};
	},
	props: {},
	methods: {
		liveInit() {
			this.$Apis.getHomeRecommend().then(res => {
				this.liveList = res.list;
				// console.log('getHomeRecommendgetHomeRecommend', res);
			});
		},
		liveBtn(val) {
			// #ifdef H5
			let sUserAgent = navigator.userAgent.toLowerCase();
			var isHuawei = sUserAgent.match(/huawei/i) == 'huawei';
			var isHonor = sUserAgent.match(/honor/i) == 'honor';
			if (isHuawei || isHonor) {
				let url = 'https://toc.nanyuecloud.com/toc-inst-app/zqanswer/test/index.html#/xmg/live?live_id=' + val.id;
				location.href = url;
			} else {
				this.$Router.push({
					path: '/livePages/live/live',
					query: {
						live_id: val.id
					}
				});
			}
			// #endif
			// #ifdef MP-WEIXIN
			this.$Router.push({
				path: '/livePages/live/live',
				query: {
					live_id: val.id
				}
			});
			// #endif
		}
	},
	mounted() {
		this.liveInit();
	}
};
</script>

<style lang="scss">
.live-broadsast {
	padding: 0 0 30rpx 30rpx;
	.scroll-live {
		white-space: nowrap;
		width: 100%;
		.scroll-live-item {
			position: relative;
			display: inline-block;
			width: 690rpx;
			height: 301rpx;
			margin-right: 20rpx;
		}
		.live-left-top {
			position: absolute;
			top: 20rpx;
			left: 20rpx;
			padding: 2rpx 18rpx 2rpx 2rpx;
			font-size: 16rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #ffffff;
			background-color: rgba(0, 0, 0, 0.4);
			border-radius: 40rpx;
			z-index: 2;
		}
		.image-radius {
			width: 100%;
			height: 100%;
			border-radius: 12rpx;
		}
	}
}
</style>
